window.addEventListener('load', function() {

    var myChart = echarts.init(document.getElementById('Regpop_con'));
    var myChart2 = echarts.init(document.getElementById('visit_con'));
    var myChart6 = echarts.init(document.getElementById('survey_con'));
    var myChart8 = echarts.init(document.getElementById('top5_con'));
    var myChart5 = echarts.init(document.getElementById('conRan_con'));
    var myChart7 = echarts.init(document.getElementById('definition_con'));
    var myChart3 = echarts.init(document.getElementById('duration_l_con'));
    var myChart4 = echarts.init(document.getElementById('duration_r_con'));
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    option = {
        title: {
            // text: `{a|分部毛利增速图}`,
            textStyle: {
                rich: {
                    a: {
                        fontSize: 16,
                        fontWeight: 600,
                    },
                },
            },
            top: '2%',
            left: '2%',
        },
        legend: {
            data: ['增值服务', '金融科技及企业服务', '网络广告', '群结算'],
            textStyle: {
                align: 'right',
                color: '#fff'
            },
            bottom: '2%',
            right: '2%',
        },

        tooltip: {
            trigger: 'axis',
        },

        grid: {
            top: '10%',
            left: '20%',
            right: '8%',
            bottom: '30%',
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true,
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: '#f00',
                },
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    color: "#8DB6DB"
                }
            },
            boundaryGap: false,
            data: ['第一季度', '第二季度', '第三季度', '第四季度'],
        }, ],

        yAxis: [{
            type: 'value',
            // min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#e3e3e3',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value}',
            },
            axisTick: {
                show: false,
            },
        }, ],
        series: [{
                name: '增值服务',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: 'red',
                    },
                },
                itemStyle: {
                    color: 'red',
                    borderWidth: 3,
                    // borderColor: '#f3f3f3',
                },
                data: [4500, 1000, 1500, 2800],
            },
            {
                name: '金融科技及企业服务',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: 'yellow',
                    },
                },
                itemStyle: {
                    color: 'yellow',
                    // borderColor: 'yellow',
                    borderWidth: 3,
                },
                data: [200, 3200, 2000, 3500],
            },
            {
                name: '网络广告',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: 'skyblue',
                    },
                },
                itemStyle: {
                    color: 'skyblue',
                    // borderColor: 'skyblue',
                    borderWidth: 3,
                },
                data: [2500, 800, 700, 2600],
            },
            {
                name: '群结算',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: '#C258F6',
                    },
                },
                itemStyle: {
                    color: '#C258F6',
                    // borderColor: '#C258F6',
                    borderWidth: 3,
                },
                data: [1900, 2000, 1000, 2400],
            }
        ],
    };

    option && myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    });

    // -------
    option2 = {
        title: {
            // text: "{a|其他健康指数}",
            x: "center",
            textStyle: {
                rich: {
                    a: {
                        fontSize: 18,
                        color: "#5e5e5e",
                    },
                },
            },
        },
        grid: {
            top: '10%',
            left: '20%',
            right: '8%',
            bottom: '30%',
        },
        //鼠标滑过提示栏
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        //图表选择栏
        legend: {
            icon: "square",
            // top: 20,
            bottom: 0,
            itemHeight: 10, //修改icon图形大小
            textStyle: {
                fontSize: 13,
                color: "#eee",
            },
            data: ["高度健康", "中度健康", "低度健康", "故障", "金融"],
        },
        //图标离容器的距离
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   //是否包含坐标轴
        //   containLabel: true,
        //   //鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
        // },
        //x坐标轴
        xAxis: [{
            type: "category",
            data: [
                "合肥",
                "马鞍山",
                "芜湖",
            ],
            axisLabel: {
                show: true,
                interval: 0,
                // rotate: "-45",
            },
        }, ],
        //y坐标轴
        yAxis: [{
            type: "value",
        }, ],
        // 数据展示区域
        series: [{
                name: "高度健康",
                type: "bar",
                color: "#0d867f",
                barWidth: 5,
                data: [
                    7994, 300, 2116, 4060, 5089, 8936, 1309, 5033, 1821, 3720, 5606,
                    4816, 9732, 476, 9394, 3895,
                ],
            },
            {
                name: "中度健康",
                type: "bar",
                color: "#34c1f0",
                barWidth: 5,
                data: [
                    5506, 271, 8906, 8018, 4175, 8692, 1981, 2856, 8997, 3183, 74,
                    1906, 8963, 1879, 6313, 7705,
                ],
            },
            {
                name: "低度健康",
                type: "bar",
                color: "#fdaa56",
                barWidth: 5,
                data: [
                    8407, 5389, 9502, 200, 2274, 2325, 2793, 7050, 5745, 6008, 18,
                    2923, 3719, 4833, 8170, 2735,
                ],
            },
            {
                name: "故障",
                type: "bar",
                color: "#db6262",
                barWidth: 5,
                data: [
                    1603, 6666, 5532, 5030, 2579, 5279, 5821, 662, 135, 6651, 7465,
                    6090, 1270, 5073, 2955, 6372,
                ],
            },
            {
                name: "金融",
                type: "bar",
                color: "#db6262",
                barWidth: 5,
                data: [
                    1603, 6666, 5532, 5030, 2579, 5279, 5821, 662, 135, 6651, 7465,
                    6090, 1270, 5073, 2955, 6372,
                ],
            }
        ],
    };

    option2 && myChart2.setOption(option2);
    window.addEventListener('resize', function() {
        myChart2.resize();
    });

    // ---------
    option6 = {
        // backgroundColor: "#0F285C",
        grid: {
            containLabel: true,
            top: 10,
            right: 0,
            bottom: 10,
            left: 8
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            // 类目轴
            type: "category",
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            // 轴线设置
            axisLine: {
                show: true,
                lineStyle: { color: "#CAE8EA", type: "solid" }
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            // 坐标轴标签
            axisLabel: {
                show: true,
                fontSize: 7,
                // interval: 0,
                color: "#CAE8EA",
                fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN"
            }
        },
        yAxis: {
            // 最小间隔
            minInterval: 1,
            // 轴线设置
            axisLine: {
                show: true,
                lineStyle: { color: "#CAE8EA", type: "solid" }
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            // 坐标轴标签
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "#CAE8EA",
                fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN"
            },
            // grid区分割线
            splitLine: {
                show: true,
                lineStyle: { color: "#CAE8EA30", type: "solid" }
            }
        },
        series: [{
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
                color: "rgba(14,58,99, .5)"
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(1, 254, 246, 1)" },
                    { offset: 1, color: "rgba(0, 172, 233, 1)" }
                ])
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#83bff6" },
                        { offset: 1, color: "#2378f7" }
                    ])
                }
            },
            data: [110, 90, 250, 260, 250, 120, 100, 270, 240, 149, 150, 260]
        }]
    }

    option6 && myChart6.setOption(option6);
    window.addEventListener('resize', function() {
        myChart6.resize();
    });
    // ----------------------
    var data = [80, 15, 50, 30, 60];
    var className = ['广东省', '河北省', '湖南省', '福建省', '广西省'];
    var defaultData = [100, 100, 100, 100, 100];
    option8 = {
        grid: {
            left: '5%',
            right: '0%',
            bottom: 20,
            top: 10,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis', //axis , item
            backgroundColor: 'RGBA(0, 49, 85, 1)',
            borderColor: 'rgba(0, 151, 251, 1)',
            textStyle: {
                color: '#BCE9FC',
                // fontSize: this.$fontSize(0.16),
                align: 'left'
            },
            formatter: function(params) {
                return (
                    params[0].name +
                    '<br/>' +

                    params[0].seriesName +
                    ' : ' +
                    params[0].value
                );
            },
        },
        // backgroundColor: '#002D54',
        xAxis: {
            type: 'value',
            splitLine: {

                lineStyle: {
                    color: "rgba(77, 128, 254, 0.2)",
                    type: 'line'
                }
            },
            axisTick: {
                show: false
            },

            axisLabel: { //  改变x轴字体颜色和大小
                textStyle: {
                    color: "#80CFF0",
                    fontSize: 0
                }
            }
        },
        yAxis: [{
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#80CFF0',
                        fontSize: '16',
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: className,
            },
            {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: false,
                axisLabel: {
                    textStyle: {
                        color: '#CFEFFF',
                        fontSize: '16',
                    },

                    formatter: function(value) {
                        return value + '万';
                    },
                },
                data: data,
            },
        ],
        series: [{
                name: '人数',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(0, 151, 251, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(48, 236, 166, 1)',
                            },
                        ]),
                    },
                },
                barWidth: 15,
                data: data,
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: 15,
                barGap: '-100%',
                data: defaultData,
                label: {
                    normal: {
                        show: true,
                        color: '#CFEFFF',
                        fontSize: '16',
                        position: 'insideRight',
                        formatter: function(value) {
                            console.log(value)
                            return data[value.dataIndex] + '万';
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(0, 151, 251, 0.2)',
                        barBorderRadius: 0,
                    },
                },
            },
        ],
    };

    option8 && myChart8.setOption(option8);
    window.addEventListener('resize', function() {
        myChart8.resize();
    });

    // 地图-----------------------------
    // var china_chart = echarts.init(document.getElementById('china_chart'));
    //数据纯属虚构  [{城市:数据,...}]
    var data = [{
        name: '江苏',
        value: 1
    }, {
        name: '北京',
        value: 34
    }, {
        name: '上海',
        value: 68
    }, {
        name: '重庆',
        value: 23
    }, {
        name: '河北',
        value: 34
    }, {
        name: '河南',
        value: 3.2
    }, {
        name: '云南',
        value: 1.6
    }, {
        name: '辽宁',
        value: 4.3
    }, {
        name: '黑龙江',
        value: 4.1
    }, {
        name: '湖南',
        value: 2.4
    }, {
        name: '安徽',
        value: 33
    }, {
        name: '山东',
        value: 54
    }, {
        name: '新疆',
        value: 1
    }, {
        name: '浙江',
        value: 44
    }, {
        name: '江西',
        value: 22
    }, {
        name: '湖北',
        value: 2.1
    }, {
        name: '广西',
        value: 3.0
    }, {
        name: '甘肃',
        value: 1.2
    }, {
        name: '山西',
        value: 3.2
    }, {
        name: '内蒙古',
        value: 3.5
    }, {
        name: '陕西',
        value: 2.5
    }, {
        name: '吉林',
        value: 4.5
    }, {
        name: '福建',
        value: 2.8
    }, {
        name: '贵州',
        value: 1.8
    }, {
        name: '广东',
        value: 3.7
    }, {
        name: '青海',
        value: 0.6
    }, {
        name: '西藏',
        value: 0.4
    }, {
        name: '四川',
        value: 3.3
    }, {
        name: '宁夏',
        value: 0.8
    }, {
        name: '海南',
        value: 1.9
    }, {
        name: '台湾',
        value: 0.1
    }, {
        name: '香港',
        value: 0.1
    }, {
        name: '澳门',
        value: 0.1
    }];

    var option5 = {
        // title: {
        //     show: true,
        //     text: '排名情况',
        // },
        tooltip: { //悬浮弹框
            show: false,
            // formatter: function(params) {//data series里面数据 =[{name:'',value:''},{}] 
            //     return params.name + '：' + params.value + '人';
            // },
            formatter: '{a}-{b}:{c}人',
        },
        visualMap: [{ //visualMap 是视觉映射组件，用于进行『视觉编码 visualMap：图注样式定制，其中包括color范围，文字提示
            // type:'continuous',//连续型视觉映射组件 type: 'piecewise',//类型为连续型
            type: 'piecewise', //分段型视觉映射组件
            // orient: 'horizontal',//如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
            // itemWidth: 40,
            // itemHeight: 20,
            // text: ['高', '低'],
            // min: 1,//最小值区域  小于1  显示的green
            // max: 60,//大于4显示 red       剩余是中间区域blue 左右叠色
            // inRange: {
            //     color: ['green','red','yellow']
            // },
            // bottom: 30,
            // left: 'left',
        }],
        geo: { //地理坐标系组件 geo:定义地图为china 常用zoom
            map: 'china', //地图类型。ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积 map/js/china.js
            // zoom:1,//视角缩放比例  
            // label: {
            //     show: true
            // },
            emphasis: { //高亮
                label: { //地图的标签名字
                    show: false
                },
                itemStyle: { //区域样式 hover样式
                    areaColor: 'pink'
                }
            }
        },
        series: [{
            // name: '地图',
            type: 'map', //地图
            geoIndex: 0, //映射visualMap 颜色配置
            data: data
        }],
    };

    option5 && myChart5.setOption(option5);
    window.addEventListener('resize', function() {
        myChart5.resize();
    });
    // ------------------
    option7 = {
        xAxis: {
            type: 'category',
            boundaryGap: false, // 紧挨边缘
            axisTick: {
                // x轴上的小刻度
                show: false
            },
            axisLabel: {
                // x轴样式
                margin: 5 // x轴距离文字距离
            },
            data: ['广东省', '浙江省', '北京市', '湖南省']
        },
        grid: {
            left: 3,
            right: 20,
            bottom: 10,
            top: 20,
            containLabel: true,
        },
        yAxis: {
            type: 'value',
            // min: 0, // 设置y轴刻度的最小值
            // max: 1800, // 设置y轴刻度的最大值
            splitNumber: 9, // 设置y轴刻度间隔个数
            splitLine: {
                // 网格线
                show: true,
                lineStyle: {
                    type: 'dotted', // dotted 虚线 solid 实线
                    color: 'rgba(255, 255, 255,0.3)'
                }
            },
            axisLabel: {
                //y 轴样式
                formatter: '{value}',
                color: '#A1A7B3',
                fontSize: 10
            }
        },
        series: [{
            data: [3900, 3500, 4800, 3000],
            type: 'line',
            smooth: true, // 平滑过渡
            symbol: 'none', // 拐点设置为实心圆点 默认是空心圆点 ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接
            // symbolSize: 8, // 拐点圆的大小
            lineStyle: {
                //线条样式
                width: 5,
                color: '#50e3c2',
                type: 'solid' //虚线  dotted 点线 solid 实线 dashed 虚线
            },
            //填充风格
            areaStyle: {
                color: 'rgba(80, 227, 194, 0.3)'
            }
        }]
    };

    option7 && myChart7.setOption(option7);
    window.addEventListener('resize', function() {
        myChart7.resize();
    });

    // ------------------
    let everyDepartment = {
        stages: [
            { name: '保证', max: 100, num: 1 },
            { name: '抵押', max: 100, num: 2 },
            { name: '质押', max: 100, num: 3 },
            { name: '留置', max: 100, num: 4 },
            { name: '定金', max: 100, num: 5 },
        ],
        scores: [43, 90, 80, 53, 78, 89, 77, 50],
    };


    function contains(arr, obj) {
        var i = arr.length;
        while (i--) {
            if (arr[i].name === obj) {
                return i;
            }
        }
        return false;
    }
    // 格式化数据
    function formatNumber(n) {
        var b = parseInt(n).toString();
        var len = b.length;
        if (len <= 3) { return b; }
        var r = len % 3;
        return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
    }
    option3 = {

        color: ['#35F3FF'],
        radar: {
            center: ['50%', '58%'],
            radius: '70%',
            triggerEvent: true,
            splitNumber: 4,
            name: {
                rich: {
                    num: {
                        fontSize: 10,
                        color: '#0079FE',
                        fontWeight: 700,
                        // padding: [0, 0, 0, 0],
                    },
                    a: {
                        fontSize: 8,
                        color: '#ccc',
                        lineHeight: '30',
                    },
                    b: {
                        color: '#00E4FF',
                        fontSize: 8,
                        fontWeight: 700,
                        // padding: [0, 0, 0, 6],
                        align: 'right'
                    },
                    c: {
                        color: '#fff',
                        fontSize: 8,
                    },
                    d: {
                        color: '#00E4FF',
                        fontSize: 8,
                        // padding: [0, 6, 0, 0],
                        align: 'right'
                    },
                    triggerEvent: true,
                },
                formatter: (a, index) => {

                    let values = a.length > 6 ? a.slice(0, 6) + '...' : a;
                    let i = contains(everyDepartment.stages, a); // 处理对应要显示的样式
                    return `{num|${everyDepartment.stages[i].num}.}{a| ${values}：}\n{b| ${formatNumber(everyDepartment.scores[i])}}{d|}`;
                },
            },
            nameGap: '2',
            indicator: everyDepartment.stages,
            splitArea: {
                show: false,
            },
            // axisLabel:{//展示刻度
            //     show: true
            // },
            axisLine: {
                //指向外圈文本的分隔线样式
                lineStyle: {
                    color: '#0A5BDE',
                    width: 1,
                },
            },
            splitLine: {
                lineStyle: {
                    width: 1,
                    color: '#0A5BDE',
                },
            },
        },
        // grid: {
        //     left: 30,
        //     right: 50,
        //     bottom: 100,
        //     top: 200,
        //     containLabel: true,
        // },
        series: [{
            type: 'radar',
            symbolSize: 1,
            data: [{
                value: everyDepartment.scores,
                name: '',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#c3821b',
                        },
                        shadowColor: '#c3821b',
                        shadowBlur: 10,
                    },
                },
                areaStyle: {
                    normal: {
                        color: 'rgba(53, 243, 255, 0.38)',
                    },
                },
            }, ],
        }, ],
    };

    option3 && myChart3.setOption(option3);
    window.addEventListener('resize', function() {
        myChart3.resize();
    });

    // -------------------------------
    option4 = {
        // backgroundColor: '#093036',
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     left: 'center',
        //     top: 20,
        //     textStyle: {
        //         color: '#ccc'
        //     }
        // },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 300,
            max: 400,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '农房信息',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5', "#F3972F"], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [{
                    value: 285,
                    name: '网络客户'
                },
                {
                    value: 210,
                    name: '个人客户'
                },
                {
                    value: 400,
                    name: '企业客户'
                },
                {
                    value: 400,
                    name: '安全客户'
                }
            ].sort(function(a, b) {
                return a.value - b.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: '#8DEF8B',
                            fontSize: 8,
                            fontWeight: 'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 8,
                            height: 8
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowBlur: 10,
                }
            }
        }]
    };

    option4 && myChart4.setOption(option4);
    window.addEventListener('resize', function() {
        myChart4.resize();
    });

})